<template>
	<view class="merchant">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				编辑设备信息
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}"></view>
		<view class="form">
			<view class="content clearfix">
				<view class="name fl">设备名称</view>
				<view class="inp fr">
					<input type="text" v-model="formData.charger_name" placeholder="请输入设备名称" disabled />
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">设备编码</view>
				<view class="inp fr">
					<input type="text" v-model="formData.charger_number" placeholder="请输入设备编码" disabled />
				</view>
			</view>
			<view class="content clearfix" v-if="formData.type == 2">
				<!-- 充电盒子 -->
				<view class="name fl">设备型号</view>
				<view class="xuanze fr" @click="lxstatus = true">
					{{lxlabel}}
				</view>
				<u-select v-model="lxstatus" :list="lxlist" @confirm="confirmlx"></u-select>
			</view>
			<view class="content clearfix" v-if="formData.type == 3">
				<!-- 充电线 -->
				<view class="name fl">设备型号</view>
				<view class="xuanze fr" @click="linestatus = true">
					{{linelabel}}
				</view>
				<u-select v-model="linestatus" :list="linelist" @confirm="confirmline"></u-select>
			</view>
			<view class="content clearfix">
				<view class="name fl">房间号</view>
				<view class="inp fr">
					<input type="text" v-model="formData.roomno" placeholder="请输入房间号" />
				</view>
			</view>
			<view class="content contentlast clearfix">
				<view class="name fl">所属WIFI</view>
				<view class="xuanze fr" @click="wifistatus = true">
					{{wifilabel}}
				</view>
				<u-select v-model="wifistatus" :list="wifilist" @confirm="confirmwifi"></u-select>
			</view>
		</view>
		<view class="footer">
			<view class="submit" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				lxstatus: false,
				lxlist: [],
				lxvalue: 0,
				lxlabel: '请选择',
				wifistatus: false,
				wifilist: [],
				wifivalue: 0,
				wifilabel: '请选择',
				linestatus: false,
				linelist: [],
				linevalue: 0,
				linelabel: '请选择',
				formData:{
					id: '',
					charger_name: '',
					charger_number: '',
					roomno: '',
					charger_type: '',
					wifi_id: '',
					type: '',
				},
			}
		},
		onLoad(options) {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			this.getgoodslx();//充电盒类型
			this.getgoodsline();//充电线类型
			
			if(options.id){
				this.formData.id = options.id;

				this.request({
					url: '/xcx/deviceinfo',
					data: this.formData,
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.formData.type = res.data.data.type;
						this.formData.charger_name = res.data.data.charger_name;
						this.formData.charger_number = res.data.data.charger_number;
						this.formData.roomno = res.data.data.roomno;
						this.formData.charger_type = res.data.data.charger_type;
						this.formData.wifi_id = res.data.data.wifi_id;
						
						for(let i=0;i<this.lxlist.length;i++){
							if(this.lxlist[i].value == this.formData.charger_type){
								this.lxlabel = this.lxlist[i].label;
							}
						}
						
						for(let i=0;i<this.linelist.length;i++){
							if(this.linelist[i].value == this.formData.charger_type){
								this.linelabel = this.linelist[i].label;
							}
						}
						
						this.getwifilist(res.data.data.charger_station_id);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				});
			}
		},
		methods: {
			submit(){				
				this.request({
					url: '/xcx/deviceedit',
					data: this.formData,
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '成功',
							icon: 'none'
						})
						
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				});
			},
			getgoodslx(){
				this.request({
					url: '/xcx/goodstype',
					data: {
						
					},
					method: "POST"
				}).then(res => {
					if(res.data.code == 200){
						let list = res.data.data;
						
						for(let i=0;i<list.length;i++){
							this.lxlist.push({
								value: list[i].id,
								label: list[i].title,
							})
						}
					}
				});
			},
			getgoodsline(){
				this.request({
					url: '/xcx/linetype',
					data: {
						
					},
					method: "POST"
				}).then(res => {
					if(res.data.code == 200){
						let list = res.data.data;
						
						for(let i=0;i<list.length;i++){
							this.linelist.push({
								value: list[i].id,
								label: list[i].title,
							})
						}
					}
				});
			},
			getwifilist(station_id){
				this.request({
					url: '/xcx/wifilistnopage',
					data: {
						station_id: station_id,
					},
					method: "POST"
				}).then(res => {
					if(res.data.code == 200){
						let list = res.data.data;
						
						for(let i=0;i<list.length;i++){
							this.wifilist.push({
								value: list[i].id,
								label: list[i].username,
							})
						}
						
						for(let j=0;j<this.wifilist.length;j++){
							if(this.wifilist[j].value == this.formData.wifi_id){
								this.wifilabel = this.wifilist[j].label;
							}
						}
					}
				});
			},
			topage(url){
				uni.navigateTo({
					url
				})
			},
			fanhui() {
				uni.navigateBack();
			},
			confirmlx(e) {
				this.lxvalue = e[0].value;
				this.lxlabel = e[0].label;
				this.formData.charger_type = e[0].value;
			},
			confirmline(e) {
				this.linevalue = e[0].value;
				this.linelabel = e[0].label;
				this.formData.charger_type = e[0].value;
			},
			confirmwifi(e) {
				this.wifivalue = e[0].value;
				this.wifilabel = e[0].label;
				this.formData.wifi_id = e[0].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.merchant {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: #f9f9ff;
		overflow-y: scroll;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				text {
					font-size: 24rpx;
				}

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;		
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
		}
		
		.form{
			width: 94%;
			margin: 0 auto;
			margin-top: -280rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx;
			box-shadow:rgba(223, 230, 255, 0.67) 0px 0px 6px;
			
			.content{
				height: 92rpx;
				line-height: 92rpx;
				border-bottom: 1rpx solid #D8D8D8;
				
				.name{
					font-size: 28rpx;
					color: #333333;
					width: 40%;
				}
				
				.inp{
					width: 60%;
					text-align: right;
					
					input{
						font-size: 28rpx;
						color: #999999;
						height: 92rpx;
						line-height: 92rpx;
					}
				}
				
				.xuanze{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					color: #368BF8;
				}
				
				.img{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					
					image{
						width: 108rpx;
						height: 64rpx;
						margin-top: 12rpx;
					}
				}
			}
			
			.contentlast{
				border: none;
			}
		}
		
		.shoufei{
			width: 94%;
			margin: 0 auto;
			margin-top: 40rpx;
			
			.headtitles{
				width: 100%;
				text-align: left;
				font-size: 32rpx;
				color: #333333;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
			
			.fangan{
				width: 100%;
				margin: 0 auto;
				margin-bottom: 40rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 32rpx 20rpx 22rpx 20rpx;
				
				.top{
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #D8D8D8;
					
					.title{
						font-size: 28rpx;
						color: #333333;
					}
					
					.edit{
						font-size: 28rpx;
						color: #368BF8;
					}
				}
				
				.bottom{
					
					.text{
						font-size: 24rpx;
						color: #333333;
						margin-top: 20rpx;
					}
				}
			}
		}
		
		.footer{
			width: 100%;
			margin: 0 auto 40rpx;
			margin-top: 60rpx;
			height: 72rpx;
			text-align: center;
			
			.submit{
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(90deg, #65bdfc, #398ef8);
				margin-left: 248rpx;
				border-radius: 36rpx;
				border-top-left-radius: 0;
				border-bottom-left-radius: 42rpx;
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}
	}
</style>